<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<LINK href="css/jwf.css" type="text/css" rel="stylesheet">
<LINK href="css/test-app.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="3rdparty/ckeditor/ckeditor.js"></script>
 

<script id="onload" jwfid="script" type="text/javascript">
	$(document).ready( function() {
		$("#_jwf_window_width").val($(window).width());
		$("#_jwf_window_height").val($(window).height());
		$(".dialog").css("position", "static");
	});
</script>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JWF Components</title>
</head>

<body>
<table border="1">

	<tr style="font-weight: bold">
		<td>Name</td>
		<td>Template</td>
	</tr>

	<tr>
		<td>Label</td>
		<td jwfid="Label"><span jwfclass="Label" class="label">label</span></td>
	</tr>
	<tr>
		<td>TextField</td>
		<td jwfid="TextField"><input jwfclass="textbox"
			style="color: red;" type="text" name="textbox" value="" /></td>
	</tr>
	<tr>
		<td>LongTextField</td>
		<td jwfid="LongTextField"><textarea jwfclass="textarea"
			name="text"></textarea></td>
	</tr>
	<tr>
		<td>RichTextField</td>
		<td jwfid="RichTextField"><textarea jwfclass="textarea" class="ckeditor"
			name="text"></textarea></td>
	</tr>
	<tr>
		<td>TextBox</td>
		<td jwfid="TextBox"><input jwfclass="textbox" type="text"
			name="textarea" value="" /> or <textarea jwfclass="textarea"
			name="text"></textarea></td>
	</tr>
	<tr>
		<td>Button</td>
		<td jwfid="Button"><input jwfclass="button" style="color: red"
			type="button" name="foo" value="bar" /></td>
	</tr>
	<tr>
		<td>HyperLinkButton</td>
		<td jwfid="HyperLinkButton"><a jwfclass="link" style="cursor:pointer;">link-button</a></td>
	</tr>
	<tr>
		<td>Image</td>
		<td jwfid="Image"><img jwfclass="image" src="" /></td>
	</tr>
	<tr>
		<td>Captcha</td>
		<td jwfid="Captcha">
		<div jwfclass="questionContainer">question or image</div>
		<input name="change" type="button" value="change" jwfclass="change"><br>
		<input jwfclass="answer" type="text" /></td>
	</tr>
	<tr>
		<td>Validator</td>
		<td jwfid="Validator"><span jwfclass="message"
			class="validatorMessage">Required</span></td>
	</tr>
	<tr>
		<td>GroupValidator</td>
		<td jwfid="GroupValidator">
		<ul jwfid="list" jwfclass="list" style="display: inline;">
			<li jwfclass="item," class="validatorMessageLine"
				style="display: inline;"><span jwfclass="message"
				class="validatorMessage">Required</span></li>
			<li jwfclass="item," class="validatorMessageLine"
				style="display: inline;"><span jwfclass="message"
				class="validatorMessage">MaxLength(10)</span></li>
		</ul>
		</td>
	</tr>
	<tr>
		<td>ListView</td>
		<td jwfid="ListView">
		<h3 jwfclass="title">title</h3>
		<ul jwfclass="list" title="a list">
			<li jwfclass="item">item 1</li>
			<li jwfclass="item">item 2</li>
			<li jwfclass="item">item 3</li>
		</ul>
		</td>
	</tr>
	<tr>
		<td>TreeView</td>
		<td jwfid="TreeView">
		<div class="tree-view" jwfclass="list">
		<div class="row" jwfclass="item,">
		<table border="0" cellpadding="0" cellspacing="0">
			<tr jwfclass="list">
				<td jwfclass="expanded">
					<a jwfclass="link" href="#"	title="expand">
					<img border="0"	src="image/treeview/expanded.gif">
					</a>
				</td>
				<td jwfclass="last-expanded">
					<a jwfclass="link" href="#"	title="expand">
					<img border="0"	src="image/treeview/last-expanded.gif">
					</a>
				</td>
				<td jwfclass="collapsed">
					<a jwfclass="link" href="#"	title="collapse">
					<img border="0"	src="image/treeview/collapsed.gif">
					</a>
				</td>
				<td jwfclass="last-collapsed">
					<a jwfclass="link" href="#">
					<img border="0" src="image/treeview/last-collapsed.gif">
					</a>
				</td>
				<td jwfclass="leaf"><img border="0" src="image/treeview/leaf.gif"></td>
				<td jwfclass="last-leaf"><img border="0" src="image/treeview/last-leaf.gif"></td>
				<td jwfclass="blank"><img border="0" src="image/treeview/blank.gif"></td>
				<td jwfclass="line"><img border="0" src="image/treeview/line.gif"></td>
				<td jwfclass="content">node1</td>
			</tr>
		</table>
		</div>
		<div class="row" jwfclass="item">
		<table border="0" cellpadding="0" cellspacing="0">
			<tr jwfclass="list">
				<td jwfclass="item">+</td>
				<td jwfclass="nodeContent">node1</td>
			</tr>
		</table>
		</div>
		<div class="row">
		<table>
			<tr>
				<td>+</td>
				<td>-</td>
				<td>node2</td>
			</tr>
		</table>
		</div>
		</div>
		</td>
	</tr>




	<tr>
		<td>PaginationListView</td>
		<td jwfid="PaginationListView">

		<ul jwfclass="list" title="a list">
			<li jwfclass="item">item 1</li>
			<li jwfclass="item">item 2</li>
			<li jwfclass="item">item 3</li>
		</ul>
		<a jwfclass="previous" href="">previous</a> <a jwfclass="next" href=""
			d>next</a> <input jwfclass="pageNumberToGo" type="text" size="3"><input
			jwfclass="go" type="button" value="go"> <span
			jwfclass="current">1</span>/<span jwfclass="total">10</span></td>
	</tr>

	<tr>
		<td>DataTable</td>
		<td jwfid="DataTable">
		<table jwfclass="table" class="data-table">
			<tr jwfclass="header" style="background-color: silver">
				<td>a</td>
			</tr>
			<tr jwfclass="odd" style="background-color: yellow">
				<td>b</td>
			</tr>
			<tr jwfclass="even" style="background-color: green">
				<td>b</td>
			</tr>
		</table>
		</td>
	</tr>

	<tr>
		<td>Tabs</td>
		<td jwfid="Tabs">
		<div>
		<div class="tab-header">
		<ul class="tabs-title-list" jwfclass="title,list">
			<li jwfclass="item,item" class="tabs-title-item"><a
				jwfclass="name" href="#">tab1
				</a>  <a style="display:none;" jwfclass="closeButton"  href="#" >[X]</a></li>
			<li jwfclass="selected-item,item" class="tabs-title-item-active">
			<a href="#">tab2
				</a>  
				<a  jwfclass="closeButton"  href="#" >[X]</a></li>
			<li jwfclass="item,item" class="tabs-title-item"><a href="#">tab3</a>  <a style="display:none;" jwfclass="closeButton"  href="#" >[X]</a></li>
		</ul>
		</div>

		<div jwfclass="content" class="tabs-content">tab content</div>
		</div>
		</td>
	</tr>
	<tr>
		<td>MessageDialog</td>
		<td jwfid="MessageDialog">
		<div jwfclass="window" class="dialog">
		<div jwfclass="body" class="dialog-body window-body">
		<ul>
			<li><span jwfclass="message">put the info here</span></li>


			<li><input jwfclass="ok" type="submit" value="OK"></li>
		</ul>
		</div>
		</div>
		</td>
	</tr>




	<tr>
		<td>ConfirmDialog</td>
		<td jwfid="ConfirmDialog">
		<div jwfclass="window" class="dialog">
		<div jwfclass="body" class="dialog-body window-body">
		<ul>
			<li>Question:<span jwfclass="question">Do you really want
			delete the item?</span></li>


			<li><input jwfclass="yes" type="submit" value="Yes"><input
				jwfclass="no" type="submit" value="No"></li>
		</ul>
		</div>
		</div>
		</td>
	</tr>


</table>

</body>

</html>
